Pseudo-elements like ::before and ::after are part of the element's rendering layer and participate in CSS stacking contexts. You can control their layering using z-index and position properties to place them above or below other content.

Key Points

1
Pseudo-elements are treated as child elements in the rendering layer of their parent.
2
To use z-index, the pseudo-element must have a position value other than static (e.g., relative, absolute, fixed).
3
Higher z-index values appear on top of lower ones within the same stacking context.
4
Pseudo-elements can be stacked behind or in front of other elements or pseudo-elements depending on z-index and stacking context.

Example: Stacking Pseudo-Elements

In this example, the ::after pseudo-element with a higher z-index appears on top of the ::before pseudo-element, demonstrating how stacking and z-index affect the visual order of pseudo-elements.

Best Practices

1
Always set a position value before using z-index on pseudo-elements.
2
Use z-index carefully to avoid unexpected overlap with other content.
3
Be aware of stacking context rules, especially with nested elements or transformed parents.
4
Combine pseudo-elements with opacity, transforms, and transitions for advanced visual layering effects.

Difficulty: 6/10

Topics: z-index stacking context, pseudo-element positioning, layering with absolute/fixed elements

Scenario Questions

0-2 years experience

1
You're trying to add a tooltip arrow using ::before on a div, but it's appearing behind the div even though you set z-index: 1 on the pseudo-element. What's the most likely cause and how would you fix it?
2
You have a button with ::after that should show a hover underline, but it's not visible. The button has position: relative and the ::after has position: absolute and z-index: 10. What might be wrong?
3
If you set z-index: 5 on a ::before and z-index: 3 on a ::after of the same element, which one appears on top? Why?

2-5 years experience

1
A modal component uses ::before for a backdrop overlay, but it's appearing above the dropdown menus that should be on top. The modal has z-index: 1000 and the dropdowns have z-index: 1001. Why is this happening and how do you fix it without changing the dropdown's z-index?
2
We have a card component with a ::before pseudo-element that creates a shadow effect. It's breaking when nested inside a card with transform: translateZ(0). What's the root cause and how would you adjust the CSS to preserve the visual effect?
3
A tooltip with a ::after arrow is clipping inside a parent with overflow: hidden. The arrow needs to point outside the container. How would you solve this without removing overflow: hidden or restructuring the HTML?

5-8 years experience

1
You're designing a reusable overlay component that uses ::before and ::after for decorative layers and borders. How do you ensure consistent stacking behavior across different parent contexts (e.g., modals, drawers, fixed headers) without forcing consumers to set position or z-index on their containers?
2
In a design system, pseudo-elements are used for icons and indicators across dozens of components. Some are breaking after a CSS refactoring that added transform: translate() to a common ancestor. How do you audit and fix this systematically without breaking existing UIs?
3
A legacy component uses pseudo-elements for visual effects that rely on z-index stacking. You're migrating to a new layout system that uses CSS Grid and flexbox with new stacking rules. What edge cases should you test, and how do you document the new constraints for frontend engineers?

8+ years experience

1
You're leading a cross-team effort to unify a design system where pseudo-elements are used inconsistently for overlays, borders, and indicators. Some teams rely on z-index, others use absolute positioning tricks. How do you establish a scalable, maintainable pattern that avoids stacking context collisions across 50+ components and 3 product lines?
2
A major product has hundreds of components using pseudo-elements for visual enhancements. Performance audits show layout thrashing during animations. How would you redesign the approach to eliminate unnecessary repaints and stacking context creation while preserving visual fidelity and developer ergonomics?
3
You're migrating from a legacy CSS framework that used pseudo-elements for tooltips and arrows to a component library with real DOM elements. What are the architectural tradeoffs between pseudo-elements and real elements in terms of accessibility, theming, testing, and long-term maintainability? How do you justify the migration cost to stakeholders?

Follow-up Questions

❓What if the parent has transform: scale(1)? Does that change anything?
❓How would you debug a pseudo-element that's not appearing on top even with a high z-index?
❓Can you have multiple pseudo-elements stack on top of each other? How?